<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <ty-header :msg="msg" :age="19"></ty-header> -->
        <ty-header :obj="obj"></ty-header>
    </div>
    <script>
        //不绑定也能获取值，但是是string类型，绑定后才是真实的type类型
        Vue.component('ty-header',{
            // props:['msg','age'],
            props:['obj'],
            // template:`<div>{{msg}}{{age}}{{typeof age}}</div>`
            template:`<div>{{obj}}</div>`
        })

        new Vue({
            el:"#app",
            data:{
                msg:"我是父组件的内容",
                arr:[1,2,3,4,5],
                age:1
            },
            computed:{
                obj(){
                    return{
                        msg:this.msg,
                        arr:this.arr,
                        age:this.age
                    }
                }
            }
        })
    </script>
</body>
</html>